<template>
	<view :class="margin==true?'zy_select_container_margin':'zy_select_container'">
		<view :style="zy_customCss?zy_customCss:''" :class="rightBtn?'zy_select_containBtn':'zy_select'">
			<view class="zy_select_content" v-if="this.multiple == true">
				<view class="zy_select_content_tag">
					<view v-if="tagList.length==0" style="color: #999;" @click="selectHandler">{{placeholder}}</view>
					<zyTag v-else v-for="(item,index) in tagList" :text="item.label" closable type="info" size="mini"
						@delete="deleteTag(item,index)" />
				</view>
			</view>
			<view class="zy_select_content" v-else @click="selectHandler">
				<input type="text" v-model="label" :placeholder="placeholder" placeholder-style="font-size:32rpx"  @input="input" :disabled="disabled" />
			</view>
			<!-- 清除按钮 -->
			<view style="width: 50rpx;">
				<i v-if="label&&clearable" class="iconfont icon-qingchu" @click="clear" style="color: #999;"></i>
			</view>
			<!-- 右侧下拉按钮 -->
			<view style="margin: auto 0;">
				<i :class="activeIndex == false?'iconfont icon-xiangxia':'iconfont icon-xiangshang'"
					@click="selectHandler"></i>
			</view>
			<!-- 右侧自定义按钮/图标 -->
			<view class="zy_select_border" v-if="rightBtn||rightIcon"></view>
			<view class="zy_select_btn" v-if="rightBtn" @click="rightBtnHandler">{{rightBtn}}</view>
			<i v-if="rightIcon" :class="rightIcon" @click="rightIconHandler" class="zy_select_icon"></i>
		</view>
		<!-- 下拉弹框 -->
		<view class="zy_select_model_mask" v-if="activeIndex" @click="selectHandler">
		</view>

		<view class="zy_select_model" v-if="activeIndex">
			<view class="zy_select_model_drop">
				<view v-for="(item,index) in selectListData" :key="index" @click="lineHandler(item,index)">
					<view v-if="multiple==false" class="zy_select_model_list"
						:class="{zy_select_linebg:index == lineIndex}">
						{{item.label}}
					</view>
					<view v-else class="zy_select_model_multiList" :class="{zy_select_linebg:item.switch==true}">
						<span>{{item.label}}</span>
						<span v-if="item.switch==true"><i class="iconfont icon-gou"></i></span>
					</view>
				</view>
				<view v-if="this.selectListData.length==0" class="zy_select_model_nodata">
					{{$t('zy-select.noData')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zyTag from '../../../zy-tag/components/zy-tag/zy-tag.vue';
	export default {
		components: {
			zyTag
		},
		emits: ['input', 'lineHandler', 'clear', 'rightBtnHandler', 'rightIconHandler'],
		props: {
			// 下拉框数据
			selectList: {
				type: Array,
				default: []
			},
			//下拉框整体是否需要边距
			margin: {
				type: Boolean,
				default: true
			},
			// 下拉框样式自定义内容
			zy_customCss: {
				type: Object
			},
			// 下拉模糊搜索框和input框禁用功能联动 
			disabled: {
				type: Boolean,
				default: true
			},
			// 下拉框占位文本
			placeholder: {
				type: String,
				default: function() {
					return this.$t('public.pleaseSelect')
				}
			},
			// 下拉框清除
			clearable: {
				type: Boolean,
				default: false
			},
			// 下拉框多选是否开启
			multiple: {
				type: Boolean,
				default: false
			},
			// 右侧按钮显示名称
			rightBtn: {
				type: String,
			},
			// 右侧按钮显示图标
			rightIcon: {
				type: String,
			},
		},
		data() {
			return {
				label: '',
				value: '',
				activeIndex: false,
				lineIndex: -1,
				filterList: [],
				multiList: [],
				tagList: [],
				selectListData: [],
				filterListData:[]
			}
		},
		watch: {
			//监听selectList数据
			selectList: {
				handler(newVal, oldVal) {
					this.selectListData = newVal//获取父组件下拉框数据
					this.filterListData =newVal//获取父组件下拉框数据为模糊搜索数据
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
		},
		methods: {
			// 点击是否显示弹框事件
			selectHandler() {
				this.activeIndex = !this.activeIndex;
				this.$emit('selectHandler')
			},
			// 弹框内行点击事件，value具有唯一值性
			lineHandler(item, index) {
				this.lineIndex = index
				//多选功能为false
				if (this.multiple == false) {
					setTimeout(() => {
						this.activeIndex = false
					}, 500)
					this.label = item.label
					this.value = item.value
					this.$emit('lineHandler', {
						value: this.value,
						label: this.label,
					})
				} else {
					// 多选功能为true
					this.label = ''
					this.value = ''
					this.tagList = []
					if (this.multiList.length == 0) {
						this.multiList.push({
							label: item.label,
							value: item.value
						})
					} else {
						//根据value只判断是否反选
						if (this.multiList.findIndex(m => m.value === item.value) == -1) {
							this.multiList.push({
								label: item.label,
								value: item.value
							})
						} else {
							this.multiList = this.multiList.filter((o) => {
								console.log(o)
								return o.value !== item.value
							})
						}
					}
					//根据switch的true/false判断是否选择
					this.selectListData = this.selectListData.map(m => {
						return Object.assign(m, {
							switch: false
						})
					})
					//显示选择的label值
					for (let i = 0, length = this.selectListData.length; i < length; i++) {
						for (let j = 0, l = this.multiList.length; j < l; j++) {
							if (this.multiList[j].value == this.selectListData[i].value) {
								this.label += this.selectListData[i].label + ','
								this.value += this.selectListData[i].value + ','
								this.tagList.push({
									label: this.selectListData[i].label,
									value: this.selectListData[i].value,
								})
								this.selectListData[i].switch = true
							}
						}
					}
					this.$emit('lineHandler', this.tagList)
				}
			},
			//多选框中删除标签
			deleteTag(item, index) {
				for (let i = 0; i < this.selectListData.length; i++) {
					if (this.selectListData[i].value == item.value) {
						this.$set(this.selectListData[i], "switch", false)
					}
				}
				this.multiList = this.multiList.filter((o) => {
					return o.value !== item.value
				})
				this.tagList = this.multiList
				if (this.multiList.length == 0) {
					this.label = ''
				}
				// //强制更新
				this.$forceUpdate()
				this.$emit('lineHandler', this.multiList)
			},
			// 键盘输入时，触发input事件
			input(e) {
				// 获取父组件下拉框值
				let list = []
				//模糊搜索，过滤
				this.filterList = this.filterListData.filter((item) => {
					return item.label.indexOf(e.detail.value) >= 0
				})
				this.selectListData = this.filterList
				this.$emit('input', this.filterList)
			},
			//清除下拉框内容
			clear() {
				this.value = ''
				this.label = ''
				this.activeIndex = false
				this.$emit('clear')
			},
			//右侧按钮事件
			rightBtnHandler() {
				this.$emit('rightBtnHandler', this.label)
			},
			//右侧图标事件
			rightIconHandler() {
				this.$emit('rightIconHandler')
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
